<template>
    <div class="footer" v-if="pageRouter !== '/home'">
        <div class="page_content">
            <div class="left">
                <img src="@/assets/logo.png" alt="">
                <span class="link">友情链接：</span>
                <span class="text_1">Conpyright©2019上海派沃建筑装饰设计工程有限公司All Rights Reserved|沪ICP备08110495号-1</span>
                <span
                    class="text_2">上海派沃建筑装饰设计工程有限公司，简称派沃（中国）商业设计机构，是一家以商业地产项目规划设计、建筑设计、室内设计、文创街区设计为主的大型设计服务机构。服务领域涉及商业、酒店、办公等。商业设计领域尤其擅长商业综合体、购物中心、百货零售、商业街区设计等。</span>
            </div>
            <div class="right">
                <div class="title">
                    <router-link style="margin-right: 1rem;" to="/about">关于沃派</router-link>
                    <router-link style="margin-right: 1rem;" to="/project?id=0">项目案例</router-link>
                    <router-link style="margin-right: 1rem;" to="/institute">研究所</router-link>
                    <router-link to="/contact">联系我们</router-link>
                </div>
                <div class="picTitle">
                    <div>
                        <img src="@/assets/二维码.jpg" alt="">
                        <span>商务合作</span>
                    </div>
                    <div>
                        <img src="@/assets/二维码.jpg" alt="">
                        <span>派沃设计公众号</span>
                    </div>
                    <div style="margin-right: 0">
                        <img src="@/assets/二维码.jpg" alt="">
                        <span>派沃商业设计研究院</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const pageRouter = ref(router.currentRoute._value.fullPath)
// console.log(pageRouter.value === "/home");
// 监听路由变化
watch(
    () => router.currentRoute.value.fullPath, // 正确监听 currentRoute
    (newRoute) => {
        pageRouter.value = newRoute;
        // console.log('Updated pageRouter:', pageRouter.value); // 确认是否有更新
    }
);

onMounted(() => {
    pageRouter.value = router.currentRoute._value.fullPath;
});
</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 25rem;
    background: url("@/assets/bg.jpg");

    .page_content {
        // background-color: pink;
        height: 100%;
        display: flex;

        .left {
            width: 50%;
            display: flex;
            flex-flow: column;
            justify-content: start;
            color: #9c9c9c;
            margin-left: 1rem;
            margin-top: 1rem;

            img {
                width: 5.14rem;
                height: 2.54rem;
                margin-bottom: 1.3rem;
                margin-top: 4.2rem;
            }

            .link {

                display: inline-block;
                margin-bottom: 1.3rem;
            }

            .text_1 {
                font-size: 0.95rem;
                margin-bottom: 2rem;
            }

            .text_2 {
                display: flex;
                flex-flow: column;
                justify-content: start;
                line-height: 2rem;
                font-size: 1rem;
            }
        }

        .right {
            width: 50%;
            display: flex;
            flex-flow: column;
            justify-content: start;
            align-items: flex-end;
            color: #fff;

            .title {
                margin-top: 8rem;
                display: flex;
                justify-content: end;
                font-size: 0.85rem;
            }

            .picTitle {
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 2rem;

                div {
                    display: flex;
                    margin-right: 1rem;
                    flex-flow: column;
                    align-items: center;
                }

                img {
                    display: block;
                    width: 80px;
                    height: 80px;
                }

                span {
                    display: inline-block;
                    text-align: center;
                    width: 100%;
                }
            }

        }

    }
}
</style>